<template>
    <div class="font-bold overflow-hidden">
        <el-scrollbar>
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                :collapse="isCollapse"
                :collapse-transition="false"
                :unique-opened="true"
                :router="false"
            >
                <!-- <el-menu-item index="2" @click="handleClickMenu('/home/index')">
                    <el-icon><home-filled /></el-icon>
                    <template #title>首页</template>
                </el-menu-item> -->

                <!-- <el-menu-item index="3" v-for="(item, index) in menuList" :key="index">
                    <el-icon><document /></el-icon>
                    <template #title>{{ item.title }}</template>
                </el-menu-item> -->
                <template v-for="subItem in menuList" :key="subItem.path">
                    <el-sub-menu v-if="subItem.children?.length" :index="subItem.path">
                    <template #title>
                        <el-icon>
                        <component :is="subItem.meta.icon"></component>
                        </el-icon>
                        <span class="sle">{{ subItem.meta.title }}</span>
                    </template>
                    <SubMenu :menu-list="subItem.children" />
                    </el-sub-menu>
                    <el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
                    <el-icon>
                        <component :is="subItem.meta.icon"></component>
                    </el-icon>
                    <template #title>
                        <span class="sle">{{ subItem.meta.title }}</span>
                    </template>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
// import {
// //   Document,
// //   Menu as IconMenu,  
// //   Location,
// //   Setting,
//   HomeFilled
// } from '@element-plus/icons-vue'
import { RouteLocationRaw, useRouter } from "vue-router"
import { GlobalStore } from "@/stores/modules/global";
import { AuthStore } from "@/stores/modules/auth";

const globalStore = GlobalStore();
const isCollapse = computed(() => globalStore.isCollapse);
const authStore = AuthStore();
const menuList = computed(() => authStore.showMenuListGet);

console.log('menuList', menuList)

const router = useRouter();
const handleClickMenu = (subItem: { meta: { isLink: string | URL | undefined; }; path: RouteLocationRaw; }) => {
	if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
	router.push(subItem.path)
};

</script>

<style scoped>

</style>